<template>
  <div class="main">
    <div class="group">
      <h3>绑定 HTML class:绑定对象</h3>
      <div class="content">
        <div :class="{ active: isActive, 'text-danger': hasError }" @click="changeClass">
          沁园春·雪
        </div>
      </div>
    </div>

    <div class="group">
      <h3>绑定 HTML class:绑定对象变量 reactive</h3>
      <div class="content">
        <div :class="classObj" @click="changeClass2">沁园春·雪</div>
      </div>
    </div>

    <div class="group">
      <h3>绑定 HTML class:绑定对象变量 ref</h3>
      <div class="content">
        <div :class="classObjRef" @click="changeClass3">沁园春·雪</div>
      </div>
    </div>

    <div class="group">
      <h3>绑定 HTML class:绑定数组 ref</h3>
      <div class="content">
        <div :class="[isActive ? activeClass1 : '', errorClass2, `active-new`]">沁园春·雪</div>
      </div>
    </div>

    <div class="group">
      <h3>绑定 HTML class:在组件中使用</h3>
      <div class="content">
        <StuDemoSon4 :class="classObj"></StuDemoSon4>
      </div>
    </div>

    <div class="group">
      <h3>绑定 HTML class:计算属性</h3>
      <div class="content">
        <div :class="classObjComp" @click="changeClass4">沁园春·雪</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import StuDemoSon4 from './components/StuDemoSon4.vue'
import { computed, reactive, ref } from 'vue'

const isActive = ref(false)
const hasError = ref(false)
// 直接写入dom的对象
function changeClass() {
  isActive.value = !isActive.value
  hasError.value = !hasError.value
}
// 计算属性
let classObjComp = computed(() => ({
  active: true,
  'text-danger': true
}))
function changeClass4() {
  errorClass2.value = 'text-danger2'
}
// 通过 reactive 包装的 状态对象
const classObj = reactive({
  active: true,
  'text-danger': true
})
console.log(classObj, 'reactive')

function changeClass2() {
  classObj.active = !classObj.active
}
let activeClass1 = ref('active')
let errorClass2 = ref('text-danger')

// 通过  包装的 状态对象
const classObjRef = ref({
  active: true,
  'text-danger': true
})

console.log(classObjRef, 'ref')
console.log(classObjRef.value, 'ref.value')

function changeClass3() {
  classObjRef.value['text-danger'] = !classObjRef.value['text-danger']
}
</script>

<style lang="scss" scoped>
@import '@/assets/groupDemo.scss';

.active {
  color: darkorange;
}
.text-danger {
  background-color: red;
}
.text-danger2 {
  background-color: green;
}
.active-new {
  font-size: 22px;
}
</style>
